import { View } from "@tarojs/components";
import { memo, useEffect } from "react";
import { useLoad, useReady } from "@tarojs/taro";
import classNames from "classnames";
import Style from "./index.module.scss";

// 定义 props 类型
interface MyButtonHooksProps {
  type?: string;
  onBtnClick?: (e: React.MouseEvent) => void;
  children?: React.ReactNode;
}

const MyButtonHooks = memo(function (props: MyButtonHooksProps) {
  const { type, onBtnClick } = props;

  useEffect(() => {
    console.log("Component mounted.");
    return () => {
      console.log("Component unmounted.");
    };
  }, []);

  useLoad(() => {
    console.log("页面生命周期 useLoad");
  });

  useReady(() => {
    console.log("页面生命周期 useReady");
  });

  function handleBtnClick(e) {
    onBtnClick && onBtnClick(e);
  }

  return (
    <View
      className={classNames(Style["my-btn"], type)}
      onClick={handleBtnClick}
    >
      {props.children}
    </View>
  );
});

export default MyButtonHooks;
